<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar title="柱状图"></nav-bar>
		<!-- #endif -->
		
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-m-t-30 u-chart">
			<view class="u-title u-p-20">
				<u-section title="柱状图" line-color="#F74963" :right="false"></u-section>
			</view>
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import uChartsList from '@/style/js/uCharts.data.js';
	var _self;
	var canvaColumn = null;
		
	export default {
		components: {
		},
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				serverData:'',
			}
		},
		onLoad(e) {
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData(){
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		//下面这个根据需要保存后台数据，我是为了模拟更新柱状图，所以存下来了
				// 		_self.serverData=res.data.data;
				// 		let Column={categories:[],series:[]};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Column.categories=res.data.data.Column.categories;
				// 		Column.series=res.data.data.Column.series;
				// 		_self.showColumn("canvasColumn",Column);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				
				//本地数据模拟运行
				let Column={categories:[],series:[]};
				Column.categories = uChartsList.list.data.Column.categories;
				Column.series = uChartsList.list.data.Column.series;
				_self.showColumn("canvasColumn",Column);
			},
			showColumn(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					legend:{show:true},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'group',
							width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
						}
					  }
				});
				
			},
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						if(typeof item.data === 'object'){
							return category + ' ' + item.name + ':' + item.data.value 
						}else{
							return category + ' ' + item.name + ':' + item.data 
						}
					}
				});
			},
			
			
		},
		onPageScroll(e) {
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style>
	page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
	.u-chart{background-color: #fff;display:flex; flex-direction:column !important;}
	.u-title{width: 750rpx;}
	.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
</style>
